<template>
  <div class="musicList">
      <div class="musicList-top">
          <div class="musicList-top-left">发现好歌单</div>
          <div class="musicList-top-right">查看更多</div>
      </div>
          <div class="musicList-body">
          <van-swipe :loop="false" :width="150" :show-indicators="false" class="swiper">
          <van-swipe-item class="swiper-item" v-for="(i,index) in musicList.musicRecommend" :key="index">
              <router-link :to="{path:'/sheet',query:{id:i.id}}">
              <img :src="i.picUrl" />
              <text class="swiper-item-text">{{i.name}}</text>
              <text class="iconfont icon-play">{{clickCount(i.playCount)}}</text>
              </router-link>
          </van-swipe-item>
        </van-swipe>
      </div>
  </div>
  
</template>

<script>
import {reactive,onMounted} from 'vue'
import {getMusicList} from '@/axios/api/home.js'
export default {
  setup(){
      const musicList = reactive({
          musicRecommend:[]
      })
      onMounted(async ()=>{
          let res = await getMusicList()
          if(res.data.code==200){
             musicList.musicRecommend = res.data.result
          }
      })
      function clickCount(num){
          if(num>=100000000){
              return (num/100000000).toFixed(1)+'亿'
          }
          else if(num>=10000){
              return(num/10000).toFixed(1)+'万'
          }

      }
      return {musicList,clickCount}
  }
}
</script>

<style lang="less" scoped>

.musicList{
  margin-top:.6rem;
  margin-left:.32rem;
  margin-right:.32rem;
  height:100%;

  .musicList-top{
      display:flex;
      justify-content: space-between;
      
      .musicList-top-left{
       font-size:.43rem;
       font-weight: 600;
      }
      .musicList-top-right{
          width:1.86rem;
          height:0.56rem;
          border: 0.01rem solid rgb(201, 197, 197);
          border-radius:23px;
          font-size:0.32rem;
          line-height: 0.56rem;
          text-align:center;
      }
  }
      .musicList-body{
      margin-top:.3rem;
      width:100%;
      height:3.6rem;
    //   padding-bottom:10rem;
   .swiper{
    width:100%;
    height:4.9rem;
    margin-left:-0rem;

    .van-swipe-item{
        position:relative;
        flex-shrink:1;
        width:100%;
        height:100%;
        margin-left:.3rem;
        // background: darkblue;
        img{
            display:block;
            // width:100%;
            height:3rem;
            border-radius: .36rem;
        }
        .swiper-item-text{
            padding-top:.2rem;
            font-size:.29rem;
            font-weight: 500;
        }
        .icon-play{
            position:absolute;
            top:0.1rem;
            right:0.15rem;
            font-size:.26rem;
            color:white;
        }
    
    }
   }
  }
 }

</style>